<template>
    <div style="margin: 10px">
        <el-tabs type="border-card" v-model="activeName" >
          <el-tab-pane label="操作记录" name="first"></el-tab-pane>
          <el-tab-pane label="系统故障记录" name="second"></el-tab-pane>
          <el-tab-pane label="电池运行参数记录" name="third"></el-tab-pane>
          <el-tab-pane label="电池运行参数异常记录" name="fourth"></el-tab-pane>
        </el-tabs>
        <el-card style="margin-top: -32px;height: 840px">
          <div style="display: flex">
            <div style="width: 33%">
              <div style="width: 200px; padding: 20px; margin-left: 50px ">
                <h3>操作记录（条）</h3>
                <h1 style="color: #5470c6;font-size:70px">{{operationNum}}</h1>
              </div>
            </div>
          <div style="width: 33%;text-align: center">
            <div style="display: flex;align-items:center;height: 100%">
              <label style="margin-right: 10px;font-size: 20px;color: black">删除</label>
              <el-progress percentage="100" style="width: 300px;display: inline-block"></el-progress>
            </div>
          </div>
          <div style="width: 33%;text-align: center">
            <div style="display: flex;align-items:center;height: 100%;">
              <div style="display: flex;align-items:flex-end;">
                <label style="margin-right: 10px;font-size: 20px;color: black">修改</label>
              </div>
              <div style="display: flex;flex-flow: column">
<!--                <div style="font-size: 30px;color: #7F828B">123</div>-->
                <el-progress percentage="100" style="width: 300px"></el-progress>
              </div>
            </div>
          </div>
          </div>
          <el-table :data="dataList" stripe height="530" style="width: 100%">
            <el-table-column label="序号" prop="indexNum">
            </el-table-column>
            <el-table-column label="操作名称" prop="operationName">
            </el-table-column>
            <el-table-column label="操作用户" prop="operationUser">
            </el-table-column>
            <el-table-column label="时间" prop="operationTime">
            </el-table-column>
            <el-table-column label="说明" prop="Description">
            </el-table-column>
            <el-table-column label="操作" >
              <template slot-scope="slot">
                <el-button size="mini" type="danger">删除</el-button>
                <el-button size="mini" type="primary">修改</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="margin-top: 10px;">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="20"
              style="display: inline-block"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400">
            </el-pagination>
          </div>
        </el-card>

    </div>
</template>

<script>
  export default {
    name: 'actionCard',
    data(){
      return{
        activeName:'first',
        operationNum:236,
        dataList:[
          {indexNum:'1',operationName:'故障预警',operationUser:'关泽宇',operationTime:'2020-11-07',Description:'无'},
          {indexNum:'2',operationName:'故障处理',operationUser:'白玉泉',operationTime:'2020-11-08',Description:'无'},
          {indexNum:'3',operationName:'故障预警',operationUser:'叶元明',operationTime:'2020-11-09',Description:'无'},
          {indexNum:'4',operationName:'故障处理',operationUser:'宋修齐',operationTime:'2020-11-10',Description:'无'},
          {indexNum:'5',operationName:'故障处理',operationUser:'常经赋',operationTime:'2020-11-11',Description:'无'},
          {indexNum:'6',operationName:'故障预警',operationUser:'孟鸿志',operationTime:'2020-11-12',Description:'无'},
          {indexNum:'7',operationName:'故障预警',operationUser:'黄玉树',operationTime:'2020-11-13',Description:'无'},
        ]
      }
    }
  }
</script>

<style scoped>
  @import "../../assets/css/table.css";
</style>
